<template>
	<div>
		<a-card>
			<a-tabs default-active-key="1" @change="callback">
				<a-tab-pane key="1" tab="登录日志">
					<!-- 表格 -->
					<a-table :columns="columns" :row-key="record => record.logId" :data-source="data"
						:pagination="pagination" :loading="loading" @change="handleTableChange">
						<template slot="action" slot-scope="text, record">
							<a-button-group>
								<a-button type="link" size="small" @click="onEdit(record)">详细</a-button>
							</a-button-group>
						</template>
						<template slot="success" slot-scope="success">
							<a-tag v-if="success=='true'" color="green">成功</a-tag>
							<a-tag v-else color="#f50">失败</a-tag>
						</template>
					</a-table>
				</a-tab-pane>
				<a-tab-pane key="2" tab="操作日志" force-render>
					<!-- 操作日志 -->
					<a-table :columns="columns" :row-key="record => record.logId" :data-source="data2"
						:pagination="pagination2" :loading="loading2" @change="handleTableChange2">
						<template slot="success" slot-scope="success">
							<a-tag v-if="success=='true'" color="green">成功</a-tag>
							<a-tag v-else color="red">失败</a-tag>
						</template>
						<template slot="action" slot-scope="text, record">
							<a-button-group>
								<a-button type="link" size="small" @click="onEdit(record)">详细</a-button>
							</a-button-group>
						</template>
					</a-table>
				</a-tab-pane>
			</a-tabs>

		</a-card>
		<!-- 添加 编辑弹层 -->
		<a-modal width="60%" footer='' v-model="visible" title="详细" :destroyOnClose="true" @ok="hideModal">
			<json-viewer :value="jsonData"></json-viewer>
		</a-modal>
	</div>
</template>

<script>
	import {
		list,
		list2
	} from '@/services/log/log';
	const columns = [{
			title: '标题',
			dataIndex: 'title',
			key: "title",
			align: 'center',
		},
		{
			title: '描述',
			dataIndex: 'description',
			key: "description",
			align: 'center',
		},
		{
			title: '操作人',
			dataIndex: 'operateName',
			key: "operateName",
			align: 'center',
		},
		{
			title: '请求方式',
			dataIndex: 'requestMethod',
			key: "requestMethod",
			align: 'center',
		},
		{
			title: 'IP',
			dataIndex: 'operateAddress',
			key: "operateAddress",
			align: 'center',
		},
		{
			title: '接口',
			dataIndex: 'requestUrl',
			key: "requestUrl",
			align: 'center',
		},
		{
			title: '浏览器',
			dataIndex: 'browser',
			key: "browser",
			align: 'center',
		},
		{
			title: '访问状态',
			dataIndex: 'success',
			key: "success",
			align: 'center',
			scopedSlots: { customRender: 'success' },
		},
		{
			title: '操作系统',
			dataIndex: 'systemOs',
			key: "systemOs",
			align: 'center',
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
			key: "createTime",
			align: 'center',
		},
		{
			title: '操作',
			dataIndex: 'operate',
			align: 'center',
			scopedSlots: {
				customRender: 'action'
			},
		},
	];
	export default {
		name: 'Log',
		data() {
			return {
				value: 1,
				jsonData: '',
				data: [],
				data2: [],
				// 表格分页参数
				pagination: {
					showQuickJumper: true,
					showTotal: total => `共 ${total} 条数据`,
					showSizeChanger: true,
					pageSizeOptions: ['5', '10', '15', '20'],
					total: 0,
				},
				pagination2: {
					showQuickJumper: true,
					showTotal: total => `共 ${total} 条数据`,
					showSizeChanger: true,
					pageSizeOptions: ['5', '10', '15', '20'],
					total: 0,
				},
				loading: false,
				loading2: false,
				columns,
				page: 1,
				size: 10,
				total: 0,
				page2: 1,
				size2: 10,
				total2: 0,
				visible: false,
				title: "添加",
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				// 
				spinning: false,
			}
		},
		computed: {},
		methods: {
			callback(key) {
				console.log(key);
				this.getData2()
			},
			handleChange(value) {
				console.log(value);
			},
			// 获取列表数据
			getData() {
				this.loading = true
				const param = {
					page: this.page,
					limit: this.size
				}
				console.log(param);
				list(param).then(res => {
					let data = res.data
					this.data = data.data
					this.total = data.count;
					this.pagination.total = data.count;
					this.loading = false
				})
			},
			getData2() {
				this.loading2 = true
				const param = {
					page: this.page2,
					limit: this.size2
				}
				console.log(param);
				list2(param).then(res => {
					let data = res.data
					this.data2 = data.data
					this.total2 = data.count;
					this.pagination2.total = data.count;
					this.loading2 = false
				})
			},
			// 表格
			handleTableChange(pagination) {
				console.log("每页数量改变2");
				console.log(pagination);
				// this.pagination.current = pagination.current;
				// this.pagination.size = pagination.pageSize;
				this.size = pagination.pageSize;
				this.page = pagination.current;
				this.getData()
			},
			handleTableChange2(pagination) {
				console.log("每页数量改变2");
				console.log(pagination);
				// this.pagination.current = pagination.current;
				// this.pagination.size = pagination.pageSize;
				this.size2 = pagination.pageSize;
				this.page2 = pagination.current;
				this.getData2()
			},
			// 删除
			onDelete(record) {
				console.log(record)
			},
			// 编辑
			onEdit(record) {
				this.visible = true;
				console.log(record)
				console.log(this.$refs.detail)
				this.jsonData = record
			},
			onAdd() {
				this.title = "添加"
				this.visible = true;
			},
			// 确认弹框
			hideModal() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						this.spinning = true
						// 提交成功后关闭动画
					} else {
						return false;
					}
				});
			}
		},
		mounted() {
			this.getData();
			this.getData2();
		}
	}
</script>

<style>
</style>
